<template>
  <div class="minMenu">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="用户姓名：">
        {{ userName }}
      </el-form-item>
      <el-form-item label="用户职位：">
        {{ Job }}
      </el-form-item>
      <el-form-item label="登录邮箱：">
        {{ email }}
      </el-form-item>
      <el-form-item v-if="isAuth" label="拥有权限：" class="blockAuth">
        <div class="block" />
        <div class="minLi">
          <div class="minliTitle">基本系统·权限</div>
          <el-checkbox-group v-model="form.type1">
            <el-checkbox label="1" name="type1">基本访问</el-checkbox>
            <el-checkbox label="2" name="type1">管理权限</el-checkbox>
            <el-checkbox label="3" name="type1">导出敏感数据</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">院校管理·权限</div>
          <el-checkbox-group v-model="form.type2">
            <el-checkbox label="1" name="type2">查</el-checkbox>
            <el-checkbox label="2" name="type2">增</el-checkbox>
            <el-checkbox label="3" name="type2">改</el-checkbox>
            <el-checkbox label="4" name="type2">删</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">国际MBA·权限</div>
          <el-checkbox-group v-model="form.type3">
            <el-checkbox label="1" name="type3">查</el-checkbox>
            <el-checkbox label="2" name="type3">增</el-checkbox>
            <el-checkbox label="3" name="type3">改</el-checkbox>
            <el-checkbox label="4" name="type3">删</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">MBA中国·权限</div>
          <el-checkbox-group v-model="form.type4">
            <el-checkbox label="1" name="type4">查</el-checkbox>
            <el-checkbox label="2" name="type4">增</el-checkbox>
            <el-checkbox label="3" name="type4">改</el-checkbox>
            <el-checkbox label="4" name="type4">删</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">UCR·权限</div>
          <el-checkbox-group v-model="form.type5">
            <el-checkbox label="1" name="type5">查</el-checkbox>
            <el-checkbox label="2" name="type5">增</el-checkbox>
            <el-checkbox label="3" name="type5">改</el-checkbox>
            <el-checkbox label="4" name="type5">删</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">一级项目目录·权限</div>
          <el-checkbox-group v-model="form.type6">
            <el-checkbox label="1" name="type6">查</el-checkbox>
            <el-checkbox label="2" name="type6">改</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="minLi">
          <div class="minliTitle">审批中心·权限</div>
          <el-checkbox-group v-model="form.type7">
            <el-checkbox label="1" name="type7">国际MBA审批</el-checkbox>
            <el-checkbox label="2" name="type7">MBA-中国审批</el-checkbox>
            <el-checkbox label="3" name="type7">UCR-中国审批</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item class="minBtn">
        <el-button type="primary" @click="amendShow = true">修改密码</el-button>
        <el-button type="primary" @click="nameShow = true">修改姓名</el-button>
        <el-button type="danger" @click="logOut">退出登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="amendShow" title="修改密码">
      <el-form ref="form2" :model="form2" :rules="formrules" label-width="120px">
        <el-form-item label="原密码：" prop="oldPassword">
          <el-input v-model="form2.oldPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="form2.newPassword" type="password" />
        </el-form-item>
        <el-form-item label="确认新密码：" prop="confirmPassword">
          <el-input v-model="form2.confirmPassword" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="changePassword('form2')">确认变更</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="nameShow" title="修改姓名">
      <el-form ref="form3" :model="form3" :rules="rules" label-width="120px">
        <el-form-item label="用户姓名：" prop="username">
          <el-input v-model="form3.username" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="changeName('form3')">确认变更</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Mine',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
      } else if (value !== this.form2.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        type1: ['1'],
        type2: ['2', '3'],
        type3: ['1', '2', '3'],
        type4: ['1', '2', '3'],
        type5: ['1', '2', '3'],
        type6: ['1'],
        type7: ['1', '2', '3']
      },
      form2: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      amendShow: false,
      nameShow: false,
      form3: {
        username: ''
      },
      isAuth: false,
      formrules: {
        oldPassword: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        newPassword: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        confirmPassword: [{
          required: true,
          validator: validatePass,
          trigger: 'blur'
        }]
      },
      rules: {
        username: [{
          required: true,
          message: '用户姓名不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    userName() {
      return this.$store.getters.name
    },
    Job() {
      return this.$store.getters.job ? this.$store.getters.job : '--'
    },
    email() {
      return this.$store.getters.email
    }
  },
  created() {},
  methods: {
    changePassword(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            password: this.form2.oldPassword,
            newPassword: this.form2.newPassword
          }
          this.$store.dispatch('ChangePassword', data).then(res => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '密码修改成功' })
              this.sleepLoad(500)
            }
          })
        } else {
          return false
        }
      })
    },
    changeName(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const data = {
            username: this.form3.username
          }
          this.$store.dispatch('ChangeUserName', data).then(res => {
            if (res.code === 500) {
              this.$message({ type: 'error', message: res.msg })
            } else {
              this.$message({ type: 'success', message: '用户名修改成功' })
              this.sleepLoad(500)
            }
          })
        } else {
          return false
        }
      })
    },
    logOut() {
      this.$store.dispatch('LogOut').then(() => {
        this.sleepLoad(0)
      })
    },
    sleepLoad(t) {
      return new Promise(() => {
        setTimeout(() => {
          location.reload()
        }, t)
      })
    }
  }
}
</script>

<style>
.minMenu {
  padding: 20px;
}

.blockAuth {
  position: relative;
}

.block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.minLi {
  border-bottom: 1px solid #f5f5f5;
}

.minliTitle {
  color: #5a5a5a
}

.minBtn {
  margin-top: 60px;
}
</style>
